<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义表单</title>
		<link rel="stylesheet" type="text/css" href="common.css" />
		<link rel="stylesheet" type="text/css" href="formDesign.css" />
	</head>
	<body>
		<div id="root">
			<div class="form-design">
				<div class="form-design-top">
					<button type="button" onclick="getJson()" class="btn"
						style="position: absolute;top: 10px;right: 10px;">获取JSON</button>
				</div>
				<div class="form-design-left">
					<div class="widget-item-template" widgetType="text" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">文本</div>
							<div class="widget-type-item-icon">
								<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg" data-icon="FileLinkWordOutlined">
									<path
										d="M4 3h12.595c.93 0 1.806.355 2.439.96A3.07 3.07 0 0 1 20 6.176V21H7.405a3.53 3.53 0 0 1-2.439-.96A3.068 3.068 0 0 1 4 17.823V3ZM3 1a1 1 0 0 0-1 1v15.823c0 1.373.57 2.69 1.583 3.66A5.529 5.529 0 0 0 7.405 23H21a1 1 0 0 0 1-1V6.176a5.07 5.07 0 0 0-1.583-3.66A5.53 5.53 0 0 0 16.595 1H3Z"
										fill="currentColor"></path>
									<path
										d="M6.75 8a1 1 0 0 1 1-1h8.5a1 1 0 1 1 0 2h-8.5a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h8.5a1 1 0 1 1 0 2h-8.5a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4.5a1 1 0 1 1 0 2h-4.5a1 1 0 0 1-1-1Z"
										fill="currentColor"></path>
								</svg>
							</div>
						</div>
					</div>

					<div class="widget-item-template" widgetType="number" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">数字</div>
							<div class="widget-type-item-icon">
								<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg" data-icon="SheetGaugeOutlined">
									<path
										d="M7 8H5.546l-1.28.934v1.813l1.111-.816v6.4H7V8Zm4.44 0c.728.008 1.34.243 1.811.717.476.47.716 1.066.724 1.77v.003c0 .57-.176 1.084-.527 1.53l-2.196 2.753h2.723v1.622H9.01V15l3.11-3.89c.102-.135.165-.249.197-.344.023-.105.034-.2.034-.287a.911.911 0 0 0-.214-.606c-.134-.153-.329-.244-.618-.25a.812.812 0 0 0-.592.225l-.003.003c-.158.147-.264.363-.298.677l-.025.223H9l.011-.261c.031-.706.27-1.305.725-1.78l.003-.002c.46-.464 1.03-.7 1.694-.708h.006Zm7.938.761c-.474-.505-1.109-.753-1.878-.761h-.005a2.296 2.296 0 0 0-1.621.672c-.456.44-.716.984-.779 1.621l-.027.275h1.6l.043-.196c.062-.28.176-.458.323-.568l.006-.004a.789.789 0 0 1 .498-.177c.277.006.485.092.644.245.16.16.246.365.253.635 0 .265-.084.461-.24.613l-.004.003c-.152.152-.378.243-.715.243h-.636v1.494h.722c.292 0 .515.087.688.249.168.16.269.396.276.742-.007.338-.108.565-.274.718l-.004.004-.003.003a.882.882 0 0 1-.656.265c-.26 0-.443-.07-.573-.188l-.003-.001a1.334 1.334 0 0 1-.356-.536l-.061-.16H15l.055.295c.13.695.42 1.25.886 1.64.457.38.986.573 1.578.573h.003c.746-.008 1.376-.248 1.868-.73.505-.479.751-1.126.759-1.913v-.003c0-.366-.078-.717-.233-1.05l-.002-.005a2.071 2.071 0 0 0-.526-.667c.214-.189.38-.402.486-.64l.003-.007.003-.006c.118-.308.177-.629.177-.96v-.003a2.504 2.504 0 0 0-.678-1.713l-.001-.002Z"
										fill="currentColor"></path>
									<path
										d="M1 5a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5Zm2 0v14h18V5H3Z"
										fill="currentColor"></path>
								</svg>
							</div>
						</div>
					</div>

					<div class="widget-item-template" widgetType="select" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">下拉选项</div>
							<div class="widget-type-item-icon">
								<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg" data-icon="DownRoundOutlined">
									<path
										d="M7.755 11.658a1 1 0 0 1 1.416-1.415L12 13.07l2.828-2.829a1 1 0 0 1 1.416 1.416c-1.181 1.189-2.356 2.386-3.553 3.56a.987.987 0 0 1-1.383 0c-1.196-1.175-2.371-2.371-3.553-3.56Z"
										fill="currentColor"></path>
									<path
										d="M12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11Zm0-2a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z"
										fill="currentColor"></path>
								</svg>
							</div>
						</div>
					</div>

					<div class="widget-item-template" widgetType="textarea" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">长文本</div>
							<div class="widget-type-item-icon">
								<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg" data-icon="StyleOutlined">
									<path
										d="M14 5a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8Zm1 7a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1Zm3 5a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-4Zm-3.201 4.223-2.449-5.946H4.77a1.16 1.16 0 0 1-.187-.016L2.498 21.17a1.105 1.105 0 1 1-2.084-.736L6.562 3.013c.507-1.435 2.517-1.486 3.096-.08l7.184 17.448a1.105 1.105 0 0 1-2.043.841ZM8.165 5.113l-2.808 7.954h6.083L8.165 5.112Z"
										fill="currentColor"></path>
								</svg>
							</div>
						</div>
					</div>
					<div class="widget-item-template" widgetType="attachment" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">附件</div>
							<div class="widget-type-item-icon">
								<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg" data-icon="AttachmentOutlined">
									<path
										d="M12.304 7.315a1 1 0 0 1 1.414 1.414L8.13 14.317a1.485 1.485 0 0 0 0 2.1l.01.011a1.5 1.5 0 0 0 2.117-.005l7.43-7.43a3.5 3.5 0 0 0 0-4.95l-.036-.037a3.5 3.5 0 0 0-4.95 0l-7.778 7.777a5.521 5.521 0 0 0 7.808 7.809l7.07-7.07a1 1 0 0 1 1.415 1.414l-7.07 7.07A7.521 7.521 0 0 1 3.509 10.37l7.778-7.778a5.5 5.5 0 0 1 7.778 0l.037.037a5.5 5.5 0 0 1 0 7.778l-7.43 7.43a3.5 3.5 0 0 1-4.939.012l-.006-.006-.012-.012a3.485 3.485 0 0 1 0-4.928l5.589-5.588Z"
										fill="currentColor"></path>
								</svg>
							</div>
						</div>
					</div>
					<div class="widget-item-template" widgetType="user" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">联系人</div>
							<div class="widget-type-item-icon">
								<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg" data-icon="MemberOutlined">
									<path
										d="M9 13h6c2.761 0 6 1.929 6 5.4V20c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-1.6C3 14.932 6.239 13 9 13Zm10 7v-1.667C19 16.232 16.871 15 15 15H9c-1.83 0-4 1.172-4 3.333V20h14Zm-7-8a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
										fill="currentColor"></path>
								</svg>
							</div>
						</div>
					</div>
					<div class="widget-item-template" widgetType="date" draggable="true"
						ondragstart="handleOndragstart(event)">
						<div class="widget-type-item">
							<div class="widget-type-item-name">日期</div>
							<div class="widget-type-item-icon">
								<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg" data-icon="CalendarLineOutlined">
									<path
										d="M7 2a1 1 0 0 1 1 1h8a1 1 0 1 1 2 0h2a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2a1 1 0 0 1 1-1Zm9 3H8a1 1 0 0 1-2 0H4v15h16V5h-2a1 1 0 1 1-2 0ZM9 15a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1Zm1.5-5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1Zm3 5a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1Zm1.5 0a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1Zm3-5a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1Z"
										fill="currentColor"></path>
								</svg>
							</div>
						</div>
					</div>
					<div style="clear: both;"></div>
				</div>
				<div class="form-design-middle">
					<div class="form-design-middle-inner">
						<!-- 手机模型 -->
						<div class="phone-wrapper">
							<div class="phone-wrapper-screen" id="formDesigerContainer">

							</div>
						</div>
					</div>

				</div>
				<div class="form-design-right" id="config-panel" v-if="configPanelDispaly">
					<div class="item-attribute">
						<div class="panel">
							<div class="title">
								文本
							</div>
							<div class="base-form-item">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label base-form-item-label-required">
										<span>标题</span>
									</label>
								</div>
								<div class="base-form-item-control-wrapper">
									<input placeholder="" v-model="config.title" type="text" class="eic-input"
										value="项目">
								</div>
							</div>
							<div class="base-form-item">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<span>默认提示</span>
									</label>
								</div>
								<div class="base-form-item-control-wrapper">
									<input placeholder="" type="text" v-model="config.placeholder" class="eic-input"
										value="项目">
								</div>
							</div>
							<!-- 选项 -->
							<div class="base-form-item" v-if="config.options">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<span>选项</span>
									</label>
								</div>
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<input type="radio" value="手动添加" v-model="config.options.dataSource">
										<span>手动添加</span>
									</label>
									<label class="base-form-item-label">
										<input type="radio" value="使用外部选项" v-model="config.options.dataSource">
										<span>使用外部选项</span>
									</label>
								</div>
								<div class="base-form-item-control-wrapper" v-if="config.options.dataSource==='手动添加'">
									<div class="form-options-v2-option-box" draggable="true"
										v-for="(item,index) in config.options.fixedValues" :key="index">
										<span class="universe-icon" draggable="true"
											style="font-size: 16px; margin-right: 4px; color: rgb(143, 149, 158);"><svg
												width="1em" height="1em" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg" data-icon="DragOutlined">
												<path
													d="M8.25 6.5a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Zm0 7.25a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Zm1.75 5.5a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM14.753 6.5a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5ZM16.5 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm-1.747 9a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"
													fill="currentColor"></path>
											</svg></span>
										<div class="form-options-v2-option">
											<input placeholder="请输入选项值" v-model="config.options.fixedValues[index]"
												type="text" class="eic-input">
										</div>
										<div class="delete-btn">
											<span
												@click="config.options.fixedValues=config.options.fixedValues.filter(i => i !== item)"
												class="universe-icon form-options-v2-option-delete-icon">
												<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
													xmlns="http://www.w3.org/2000/svg" data-icon="DeleteTrashOutlined">
													<path
														d="M8 4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2h5a1 1 0 1 1 0 2h-1v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6H3a1 1 0 0 1 0-2h5ZM6 6v14h12V6H6Zm4 3a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Z"
														fill="currentColor"></path>
												</svg></span>
										</div>
									</div>

									<div class="add-operator"
										@click="config.options.fixedValues.push('选项'+(config.options.fixedValues.length+1))">
										＋ 添加选项</div>
								</div>
								<div class="base-form-item-control-wrapper" v-if="config.options.dataSource==='使用外部选项'">
									<div class="base-form-item">
										<div class="base-form-item-label-parent">
											<label class="base-form-item-label base-form-item-label-required">
												<span>请输入 URL</span>
											</label>
										</div>
										<div class="base-form-item-control-wrapper">
											<div class="ud__input ud__input--size-md">
												<div class="ud__input-input-wrap">
													<input class="eic-input" placeholder="请输入 URL" v-model="config.options.dataSourceApi.url" value=""></div>
											</div>
										</div>
									</div>
									<div class="base-form-item">
										<div class="base-form-item-label-parent">
											<label class="base-form-item-label base-form-item-label-required">
												<span>请输入 Token</span>
											</label>
										</div>
										<div class="base-form-item-control-wrapper">
											<div class="ud__input ud__input--size-md">
												<div class="ud__input-input-wrap">
													<input class="eic-input" placeholder="请输入 Token"  v-model="config.options.dataSourceApi.token" value=""></div>
											</div>
										</div>
									</div>
									<div class="base-form-item">
										<div class="base-form-item-label-parent">
											<label class="base-form-item-label">
												<span>请输入 Key</span>
											</label>
										</div>
										<div class="base-form-item-control-wrapper">
											<div class="ud__input ud__input--size-md">
												<div class="ud__input-input-wrap">
													<input class="eic-input" placeholder="请输入 Key" v-model="config.options.dataSourceApi.key" value=""></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 设置默认值 -->
							<div class="base-form-item">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<span>设置默认值</span>
										<input type="checkbox" v-model="config.defaultValue.enable" value="">
									</label>
								</div>
								<div class="base-form-item-control-wrapper" v-if="config.defaultValue.enable">
									<input placeholder="" type="text" v-model="config.defaultValue.value"
										class="eic-input" value="默认值">
								</div>
							</div>


							<div class="base-form-item">
								<div class="base-form-item-label-parent">
									<label class="base-form-item-label">
										<span>其他可选</span>
									</label>
								</div>
								<div class="base-form-item-control-wrapper">
									<label class="base-form-item-label">
										<span>必填</span>
										<input type="checkbox" v-model="config.required">
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="common.js" type="text/javascript" charset="utf-8"></script>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<script src="formItemAttributeDesign.js" type="text/javascript" charset="utf-8"></script>